//导航栏
Vue.component('NavItem', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}" style="display: flex; flex-wrap: wrap;">
    <div v-for="(item,index) in data" :key="index" style="display: flex; flex-direction: column;margin-bottom: 10px; align-items: center; margin-left: 5%; width: 14%;">
        <el-image style="border-radius: 10px; width: 50px; height: 50px;" :src="item.img" :fit="item.fit"></el-image>    
        <span style="font-size: 10px; margin-top: 5px;">{{item.name}}</span>
    </div>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
})
Vue.component('NavItemConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">导航栏组件</div>
        <div class="operation">
            <el-button :type="isSwitch?'danger':'success'" size="small" @click="()=>{this.isSwitch = !this.isSwitch}">{{isSwitch?'取消':'拖拽'}}</el-button>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button type="danger" size="small" @click="remove">删除</el-button>
        </div>
    </div>
    <div :id="'config'+id">
        <el-descriptions :style="{'border':isSwitch?'1px solid #67C23A':''}" :column="3" v-for="(item,index) in data" :key="index" border size="small">
            <el-descriptions-item label="导航名称">
                <el-input v-model.trim="item.name" placeholder="请输入导航名称"></el-input>
                <i v-show="isSwitch" style="position: absolute; left:5px; top:5px;color:#67C23A;" class="el-icon-rank"></i>
            </el-descriptions-item>
            <el-descriptions-item label="图片布局">
                <el-select filterable v-model="item.fit" placeholder="请选择">
                    <el-option v-for="(item,index) in fit" :key="item.value" :label="item.label":value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="导航图片">
                <div @click="handle(index)">
                    <div class="preview" v-show="item.img">
                        <el-image style="width: 50px; height: 50px;" :src="item.img" :fit="item.fit"></el-image>
                        <span class="el-upload-list__item-actions">
                            <span style="font-size:20px;" @click="removeimg(item)"><i class="el-icon-delete"></i></span>
                        </span>
                    </div>
                    <el-upload v-show="!item.img" :show-file-list="false" list-type="picture-card" action=""
                        accept="image/*" :before-upload="uploadFront">
                        <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div></el-card>`,
    mixins: [globalConfig, drag],
    data() {
        return {
            actived: 0,
        }
    },
    methods: {
        removeimg(item) {
            item.img = ''
        },
        handle(index) {
            this.actived = index
        },
        uploadFront(file) {
            let _this = this
            const formData = new FormData();
            formData.append('file', file, file.name);
            let oFileReader = new FileReader();
            oFileReader.readAsDataURL(file);
            oFileReader.onload = function (e) {
                _this.data[_this.actived].img = e.target.result
            }
        },
        add() {
            this.data.push({
                img: '',
                fit: 'cover',
                name: '',
            })
        },
        remove() {
            if (this.data.length > 1) {
                this.data.pop()
            }
        },
    },
    mounted() {
        this.sortable(this, '#config' + this.id, '.el-descriptions', this.data);
    },
})